import {get} from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import {FormattedDate} from 'react-intl';

import {storageFilter} from '../../constants';
import {getOptionsLable} from '../../utils';

import css from './BookInStorageInfo.css';

class BookInStorageInfo extends React.Component {
  static propTypes = {
    stripes: PropTypes.object.isRequired,
    bookInStorage: PropTypes.object.isRequired,
  };

  constructor(props) {
    super(props);
  }

  render() {
    const {
      bookInStorage,
    } = this.props;

    return (
      <div id="detail">
        <div className={css.table_title}>馆藏入库单</div>
        <div className={css.table_detail}>
          <table width="100%">
            <tbody>
              <tr>
                <td width="12.5%">日期</td>
                <td width="37.5%" rowSpan="1" colSpan="3">
                  {bookInStorage.inDate ? <FormattedDate value={bookInStorage.inDate} dateStyle="medium" /> : '-'}
                </td>
                <td width="12.5%">书商</td>
                <td width="37.5%" rowSpan="1" colSpan="3">{get(bookInStorage, ['bookseller'], '')}</td>
              </tr>
              <tr>
                <td>开始条码</td>
                <td rowSpan="1" colSpan="3">{get(bookInStorage, ['beginBarcode'], '')}</td>
                <td>结束条码</td>
                <td rowSpan="1" colSpan="3">{get(bookInStorage, ['endBarcode'], '')}</td>
              </tr>
              <tr>
                <td>总册数</td>
                <td rowSpan="1" colSpan="3">{get(bookInStorage, ['totality'], '')}</td>
                <td>经费年份</td>
                <td rowSpan="1" colSpan="3">{get(bookInStorage, ['yearFunding'], '')}</td>
              </tr>
              <tr>
                <td>入库地点</td>
                <td rowSpan="1" colSpan="3">{getOptionsLable(storageFilter, bookInStorage.storage)}</td>
                <td>色标</td>
                <td rowSpan="1" colSpan="3">{get(bookInStorage, ['colourCode'], '')}</td>
              </tr>
              <tr>
                <td>备注</td>
                <td rowSpan="1" colSpan="7">{get(bookInStorage, ['remark'], '')}</td>
              </tr>
              <tr>
                <td rowSpan="1" colSpan="8" className={css.title2}>分类册数</td>
              </tr>
              <tr>
                <td width="12.5%">A类</td>
                <td width="12.5%">{get(bookInStorage, ['aTotality'], '')}</td>
                <td width="12.5%">B类</td>
                <td width="12.5%">{get(bookInStorage, ['bTotality'], '')}</td>
                <td width="12.5%">C类</td>
                <td width="12.5%">{get(bookInStorage, ['cTotality'], '')}</td>
                <td width="12.5%">D类</td>
                <td width="12.5%">{get(bookInStorage, ['dTotality'], '')}</td>
              </tr>
              <tr>
                <td width="12.5%">E类</td>
                <td width="12.5%">{get(bookInStorage, ['eTotality'], '')}</td>
                <td width="12.5%">F类</td>
                <td width="12.5%">{get(bookInStorage, ['fTotality'], '')}</td>
                <td width="12.5%">G类</td>
                <td width="12.5%">{get(bookInStorage, ['gTotality'], '')}</td>
                <td width="12.5%">H类</td>
                <td width="12.5%">{get(bookInStorage, ['hTotality'], '')}</td>
              </tr>
              <tr>
                <td width="12.5%">I类</td>
                <td width="12.5%">{get(bookInStorage, ['iTotality'], '')}</td>
                <td width="12.5%">J类</td>
                <td width="12.5%">{get(bookInStorage, ['jTotality'], '')}</td>
                <td width="12.5%">K类</td>
                <td width="12.5%">{get(bookInStorage, ['kTotality'], '')}</td>
                <td width="12.5%">N类</td>
                <td width="12.5%">{get(bookInStorage, ['nTotality'], '')}</td>
              </tr>
              <tr>
                <td width="12.5%">O类</td>
                <td width="12.5%">{get(bookInStorage, ['oTotality'], '')}</td>
                <td width="12.5%">P类</td>
                <td width="12.5%">{get(bookInStorage, ['pTotality'], '')}</td>
                <td width="12.5%">Q类</td>
                <td width="12.5%">{get(bookInStorage, ['qTotality'], '')}</td>
                <td width="12.5%">R类</td>
                <td width="12.5%">{get(bookInStorage, ['rTotality'], '')}</td>
              </tr>
              <tr>
                <td width="12.5%">S类</td>
                <td width="12.5%">{get(bookInStorage, ['sTotality'], '')}</td>
                <td width="12.5%">T类</td>
                <td width="12.5%">{get(bookInStorage, ['tTotality'], '')}</td>
                <td width="12.5%">T类</td>
                <td width="12.5%">{get(bookInStorage, ['tTotality'], '')}</td>
                <td width="12.5%">V类</td>
                <td width="12.5%">{get(bookInStorage, ['vTotality'], '')}</td>
              </tr>
              <tr>
                <td width="12.5%">X类</td>
                <td width="12.5%">{get(bookInStorage, ['xTotality'], '')}</td>
                <td width="12.5%">Z类</td>
                <td width="12.5%">{get(bookInStorage, ['zTotality'], '')}</td>
                <td width="12.5%">&nbsp;</td>
                <td width="12.5%">&nbsp;</td>
                <td width="12.5%">&nbsp;</td>
                <td width="12.5%">&nbsp;</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div className="table_footer">
          <table width="100%">
            <tbody>
              <tr>
                <td>填单：<span>{get(bookInStorage, ['metadata.createdByUsername'], '')}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>{bookInStorage.metadata.createdDate ? <FormattedDate value={bookInStorage.metadata.createdDate} dateStyle="medium" /> : '-'}</span>
                </td>
                <td>审核：<span>{get(bookInStorage, ['reviewBy'], '')}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>{bookInStorage.metadata.reviewDate ? <FormattedDate value={bookInStorage.reviewDate} dateStyle="medium" /> : '-'}</span>
                </td>
              </tr>
              <tr>
                <td>签收：<span>{get(bookInStorage, ['signBy'], '')}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>{bookInStorage.metadata.signDate ? <FormattedDate value={bookInStorage.signDate} dateStyle="medium" /> : '-'}</span>
                </td>
                <td>确认：<span>{get(bookInStorage, ['confirmBy'], '')}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>{bookInStorage.metadata.confirmDate ? <FormattedDate value={bookInStorage.confirmDate} dateStyle="medium" /> : '-'}</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

export default BookInStorageInfo;
